<template>
  <aside class="sidebar">
    <div class="sidebar-header">
      <div class="logo-icon">
        <img src="/热点榜.svg" alt="热点logo">
      </div>
      <h1 class="system-title">智能热点发现系统</h1>
    </div>

    <div class="nav-section">
      <h2 class="nav-section-title">主要功能</h2>
      <nav class="nav-menu">
        <router-link to="/hotspot" :class="['nav-item', $route.path === '/hotspot' ? 'active' : '']">
          <i class="fa fa-dot-circle-o nav-icon"></i>
          <span>热点雷达</span>
        </router-link>
        <router-link to="/creation" :class="['nav-item', $route.path === '/creation' ? 'active' : '']">
          <i class="fa fa-cogs nav-icon"></i>
          <span>创作工厂</span>
        </router-link>
      </nav>
      <h2 class="nav-section-title">历史记录</h2>

      <div class="history-list" v-if="historyList.length">
        <div class="history-item" v-for="(item, idx) in historyList" :key="item.id"
          :class="isHistoryActive(item.id) ? 'active' : ''" @click.prevent="handleHistoryClick(item)"
          :title="item.title">
          <span class="history-title" :data-fulltitle="item.title">
            {{ item.title }}
          </span>
        </div>
      </div>
      <div class="empty-history" v-if="!historyList.length">
        暂无历史记录
      </div>
    </div>
    <div class="user-info">
      <img src="https://picsum.photos/id/64/40/40" alt="User Avatar" class="user-avatar">
      <div class="user-details">
        <p class="user-name">Chris Allow</p>
        <p class="user-role">Customer Manager</p>
      </div>
    </div>

  </aside>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()
const props = defineProps({
  // 历史记录列表，默认为空数组
  historyList: {
    type: Array,
    default: () => []
  }
});

// 判断历史记录是否处于激活状态
const isHistoryActive = (id) => {
  return route.path === '/creation' && route.query.id === id.toString();
};

// 处理历史记录点击时使用路由跳转
const handleHistoryClick = (item) => {
  router.push({
    path: '/creation',
    query: {
      title: encodeURIComponent(item.title),
      id: item.id
    }
  });
};

</script>

<style scoped>
/* 侧边栏整体样式 */
.sidebar {
  width: 250px;
  background-color: white;
  border-right: 1px solid #e5e7eb;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 侧边栏头部 */
.sidebar-header {
  padding: 16px;
  display: flex;
  align-items: center;
}

.logo-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

/* 导航部分 */
.nav-section {
  padding: 16px 0;
  flex: 1;
}

.nav-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 16px 8px;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #4b5563;
  text-decoration: none;
  border-left: 4px solid transparent;
}

.nav-item:hover {
  background-color: #f3f4f6;
  border-left-color: #d1d5db;
}

.nav-item.active {
  background-color: #eff6ff;
  color: #2563eb;
  border-left-color: #2563eb;
}

.nav-icon {
  width: 20px;
  text-align: center;
  margin-right: 12px;
}

/* 历史记录组样式 */
.history-group {
  border-left: 4px solid transparent;
}

/* 历史记录列表 */
.history-list {
  padding-left: 40px;
  padding-right: 16px;
  max-height: 430px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: #6b7280;
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px dashed #f3f4f6;
}

.history-item.active {
  color: #2563eb;
  background-color: #eff6ff;
  border-left: 2px solid #2563eb;
  padding-left: 8px;
}

.history-item:hover {
  color: #2563eb;
}

.history-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-history {
  padding: 12px 0 12px 40px;
  color: #9ca3af;
  font-size: 13px;
}

/*底部用户信息样式 */
.user-info {
  padding: 1.5rem;
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
}

.user-details {
  flex: 1;
}

.user-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
}

.user-role {
  margin: 0;
  font-size: 0.75rem;
  color: #9ca3af;
}
</style>